<template>
  <div class="cart">
    <div v-for="(item, index) in data.shopList" :key="index" class="item_warp">
      <div class="flex_row">
        <div style="margin-right: 20px">
          <el-checkbox v-model="item.checked" size="large" @click="storeCheck($event, index)" />
        </div>
        <span style="margin: 0 5px">全选</span>
      </div>
      <div class="shop_content" v-for="(item2, index2) in item.shop" :key="item2.id">
        <div style="margin-right: 20px">
          <el-checkbox v-model="item2.checked" size="large" @click="shopCheck($event, index, index2)" />
        </div>
        <div class="content_right">
          <div style="margin-left:15px">
            <div>{{ item2.shopName }}</div>
            <el-input-number v-model="item2.num" :min="1" :max="10" size="small" />
          </div>
        </div>
      </div>
    </div>
    <div class="pay">
      <el-button type="danger">立即购买</el-button>
    </div>
    <NavTab></NavTab>
  </div>
</template>

<script setup>
import NavTab from '@/components/NavTab.vue'
import { reactive } from "vue";
const data = reactive({
  shopList: [
    {
      checked: false,
      shop: [
        {
          id: 1,
          shopName: "延安旅游",      //商品名称
          brand: "宝华农业科技",
          specif: "50ml",
          price: "89.20",           //单价
          num: 1,              		//数量
          checked: false,
        },
        {
          id: 2,
          shopName: "太原旅游",
          brand: "宝华农业科技",
          specif: "50ml",
          price: "66.20",
          num: 1,
          checked: false,
        },
      ],
    }
  ],
});

</script>
<style>
.cart {
  padding: 15px;
  text-align: left;
  background-color: #f5f5f5;
  height: 100vh;
}

.flex_row {
  display: flex;
  align-items: center;
}

.shop_content {
  background-color: white;
  border: 1px solid #f5f5f5;
  margin: 5px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 24px 12px;
}

.pay {
  position: fixed;
  display: flex;
  bottom: 56px;
  right: 15px;
  padding: 0 15px;
  justify-content: right;
}
</style>

